<template>
    <view class="page">
        <z-paging ref="paging" v-model="dataList" @query="getList" :super-content-z-index="zIndex">
            <!--评价筛选-->
            <template #top>
                <view class="evaluate-filtrate">
                    <view class="filtrate-list">
                        <view class="box">
                            <view class="list" @click="onReviewTab(0)">
                                <text :class="{'action':(ReviewType==0)}">全部({{goods.evaluate_total}})</text>
                            </view>
                            <view class="list" @click="onReviewTab(1)">
                                <text :class="{'action':(ReviewType==1)}">好评({{goods.evaluate_hao}})</text>
                            </view>
                            <view class="list" @click="onReviewTab(2)">
                                <text :class="{'action':(ReviewType==2)}">中评({{goods.evaluate_zhong}})</text>
                            </view>
                            <view class="list" @click="onReviewTab(3)">
                                <text :class="{'action':(ReviewType==3)}">差评({{goods.evaluate_cha}})</text>
                            </view>
                        </view>
                    </view>
                    <view class="evaluate-rate">
                        <view class="number">{{goods.positive_rate}}%</view>
                        <view>好评率</view>
                    </view>
                    <view style="height: 20rpx; background-color: #f6f6f6;"></view>
                </view>
            </template>
            <view class="evaluate-data">
                <view class="evaluate-list">
                    <view class="list" v-for="(item,index) in dataList" :key="index">
                        <view class="user-info">
                            <view class="thumb">
                                <image :src="item.user.avatar" mode=""></image>
                            </view>
                            <view class="nickname-grade">
                                <view class="nickname">
                                    <text>{{item.user.nicename}}</text>
                                </view>
                                <view class="grade">
                                    <view class="star">
                                        <u-rate :size="24" :count="count" v-model="item.evaluate_grade"
                                            active-color="#ff0f00"></u-rate>
                                        <!-- <text class="cuIcon-favorfill lg text-gray" v-for="(value,idx) in 5"
                                            :key="idx"></text> -->
                                    </view>
                                    <view class="date">
                                        <text>{{item.evaluate_time}}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="content">
                            <view class="character">
                                <text class="two-omit">{{item.evaluate_content}}</text>
                            </view>
                            <view class="thumb-list">
                                <!-- <view>
                                    {{ item.evaluate_picture }}
                                </view> -->
                                <multifile-upload :max="6" v-model="item.evaluate_picture" mediaType="all" :maxSize="4"
                                    :chooseNum="9" :maxDuration="6" :sourceType="['album','camera']" :changeZ="true"
                                    @addZ="addZ()" @reduceZ="reduceZ()" :compress="false" :quality="80"
                                    :formData="{'file': '123'}" :remove="false" :add="false"></multifile-upload>
                            </view>
                            <!-- <view
                                style="padding: 30rpx 40rpx; display:flex; justify-content:flex-end; align-items:center;">
                                <uni-badge class="uni-badge-left-margin" :text="comNum" absolute="rightTop" size="small"
                                    @click="goComment">
                                    <image src="/static/image/comment.png" style="width: 40rpx;height: 40rpx; "
                                        @click="goComment"></image>
                                </uni-badge>
                                <image src="/static/image/dz.png" style="width: 36rpx;height: 36rpx; margin-left:30rpx;"
                                    v-if="item.zan == 0" @click="like(item)"></image>
                                <image src="/static/image/zw.png" style="width: 36rpx;height: 36rpx; margin-left:30rpx;"
                                    v-if="item.zan == 1" @click="like(item)"></image>
                            </view> -->
                        </view>
                    </view>
                </view>
            </view>
            <!--视频播放-->
            <!-- <view class="video-win" @click="onCloseVideo">
                <view class="cu-modal" :class="{'show':isVideoShow}">
                    <view class="cu-dialog" @click.stop>
                        <view class="bg-img" v-show="isVideoShow">
                            <video id="evaluate-video"
                                src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"></video>
                        </view>
                    </view>
                </view>
            </view> -->
        </z-paging>
        <!--底部-->
        <!-- <view class='details-foot'>
            <view class="foot-item">
                <view class="foot-item0" style="border-right: 1rpx solid #efefef;">
                    <image class='iconfont' src="/static/image/message.png" @tap='goShopCart'></image>
                    <text>客服</text>
                </view>
                <view class="foot-item0">
                    <image class='iconfont' src="/static/image/shopping.png" @tap='goShopCart'></image>
                    <text>购物车</text>
                </view>
            </view>
            <view class="foot-item1">
                <view class='add-shopcart' @tap='showPop0'>加入购物车</view>
                <view class='purchase' @tap='showPop1'>立即购买</view>
            </view>
        </view> -->
        <!--底部弹出层-->

        <!-- <view class="pop" v-show='isShow||isShow0||isShow1' @touchmove.stop.prevent=''>
            蒙层
            <view class='pop-mask' @tap='hidePop'></view>
            内容块
            <view class='pop-box' :animation="animationData" style="border-top-right-radius:25rpx; border-top-left-radius:25rpx;">
                <view style="display: flex; justify-content:space-between; padding:30rpx;border-bottom:1rpx solid #efefef;">
                    <view></view>
                    <view>选择商品</view>
                    <image src="/static/image/close.png" style="width: 30rpx;height:30rpx;" @tap='hidePop'>
                    </image>
                </view>
                <view style="display: flex; align-items:center; padding: 30rpx;">
                    <image class='pop-img' :src="product.imgUrl" mode="" style="width: 140rpx;height:160rpx;"></image>
                    <view>
                        <text class="commodity-price">￥{{product.price}}</text>
                        <view style="display: flex; align-items:center; margin-top:30rpx;">
                            <view style="font-size: 28rpx; color:#999999; ">已选：</view>
                            <view>{{range.find(item=>item.value==AttriValue).text}}</view>
                        </view>
                    </view>
                </view>
                <view style="padding-left: 30rpx;">规格</view>
                <view style="display: flex; flex-wrap: wrap; align-items: center; padding:30rpx;">
                    <uni-data-checkbox mode="tag" v-model="AttriValue" :localdata="range" selectedColor="#c8eadc" selectedTextColor="#2e996e"></uni-data-checkbox>
                    <view v-for="(item, index) in specilist" style="background:#E9E9E9;" @click="">{{item}}</view>
                </view>
                <view class='pop-num'>
                    <view>数量</view>
                    <uni-number-box :min='1' :value='num' @change='changeNumber'></uni-number-box>
                </view>
                <view style="display: flex; justify-content:space-between; align-items:center;padding:0 30rpx 60rpx 30rpx;" v-if="isShow">
                    <view class='pop-sub' style="background-color: #2e996d;" @tap='addCart'>
                        加入购物车
                    </view>
                    <view class='pop-sub' style="background:#ff6a00;" @tap='orderConfirm()'>
                        立即购买
                    </view>
                </view>
                <view v-if="isShow0 || isShow1" style="display:flex; justify-content:center; margin:60rpx 0;">
                    <view @tap='addCart' v-if="isShow0" style="color: #FFFFFF;text-align: center;padding: 15rpx 40rpx;border-radius: 60rpx;width: 480rpx;background-color: #2e996d;">
                        确定</view>
                    <view @tap='orderConfirm()' v-if="isShow1" style="color: #FFFFFF;text-align: center;padding: 15rpx 40rpx;border-radius: 60rpx;width: 480rpx;background-color: #2e996d;">
                        确定</view>
                </view>
            </view>
        </view> -->
    </view>
</template>

<script>
    import {
        getEvaluateLists
    } from '@/api/mall.js'
    export default {
        data() {
            return {
                queryParams: {
                    page: 1,
                    limit: 20,
                    code: '',
                    type: '',
                },
                goods: {},
                count: 5,
                num: 1,
                animationData: {},
                isShow: false,
                isShow1: false,
                isShow0: false,
                comNum: 6,
                zan: 0,
                dataList: [],
                product: {},
                AttriValue: 0,
                range: [],
                ReviewType: 0,
                isVideoShow: false,
                urls: [],
                videoContext: '',
                zIndex: 1,
                data: {},
            };
        },
        onReady: function(res) {
            this.videoContext = uni.createVideoContext('evaluate-video')
        },

        onLoad(params) {
            if (params.code) {
                this.queryParams.code = decodeURIComponent(params.code);
                console.log(this.code, 'bianhao')
                this.queryParams.type = ''
            }
            if (params.data) {
                uni.setNavigationBarTitle({
                    title: "服务评价"
                })
                this.data = JSON.parse(decodeURIComponent(params.data))
                console.log(this.data, 'this.data')
            }
        },
        methods: {
            addZ() {
                this.zIndex = 999
            },
            reduceZ() {
                this.zIndex = ''
                console.log(this.zIndex)
            },
            //点选评价列表
            onReviewTab(type) {
                this.ReviewType = type;
                if (type == 0) {
                    this.queryParams.type = ''
                } else {
                    this.queryParams.type = type
                }
                this.$refs.paging.reload();
            },

            getList(page) {
                this.queryParams.page = page
                getEvaluateLists(this.queryParams).then(res => {
                    this.goods = res.data.goods
                    this.dataList = res.data.lists
                    this.dataList.user = res.data.lists.user
                    console.log(this.dataList[0].evaluate_picture, 'tupian')
                    this.$refs.paging.complete(res.data.lists);
                }).catch(err => {
                    this.$refs.paging.complete(false);
                })
            },

            // like(item) {
            //     if (item.zan == 0) {
            //         item.zan = 1,
            //             uni.showToast({
            //                 title: "点赞成功",
            //                 duration: 2000,
            //                 icon: "none"
            //             })
            //     } else if (item.zan == 1) {
            //         item.zan = 0,
            //             uni.showToast({
            //                 title: "取消点赞",
            //                 duration: 2000,
            //                 icon: "none"
            //             })
            //     }
            // },
            // goComment() {
            //     uni.navigateTo({
            //         url: '/pages/GoodsEvaluateComment/GoodsEvaluateComment'
            //     })
            // },
            //跳转到购物车页面
            // goShopCart() {
            //     uni.switchTab({
            //         url: "/pages/mall/car",
            //     });
            // },
            //加入购物车弹窗
            // showPop0() {
            //     var animation = uni.createAnimation({
            //         duration: 200
            //     })
            //     animation.translateY(600).step();
            //     this.animationData = animation.export();
            //     this.isShow0 = true;
            //     setTimeout(() => {
            //         animation.translateY(0).step();
            //         this.animationData = animation.export();
            //     }, 200)
            // },
            // showPop1() {
            //     var animation = uni.createAnimation({
            //         duration: 200
            //     })
            //     animation.translateY(600).step();
            //     this.animationData = animation.export();
            //     this.isShow1 = true;
            //     setTimeout(() => {
            //         animation.translateY(0).step();
            //         this.animationData = animation.export();
            //     }, 200)
            // },
            // hidePop() {
            //     var animation = uni.createAnimation({
            //         duration: 200
            //     })
            //     animation.translateY(600).step();
            //     this.animationData = animation.export();
            //     this.isShow = true;
            //     setTimeout(() => {
            //         animation.translateY(0).step();
            //         this.isShow = false;
            //         this.isShow0 = false;
            //         this.isShow1 = false;
            //     }, 200)
            // },
            //改变商品数量
            // changeNumber(value) {
            //     this.num = value;
            // },

            //加入购物车
            // addCart() {
            //     this.hidePop();
            //     //提示信息
            //     uni.showToast({
            //         title: "成功加入购物车",
            //         icon: 'none'
            //     })
            // },

            //立即购买
            // orderConfirm() {
            //     this.hidePop();
            //     uni.navigateTo({
            //         url: '/pagesA/mall/orderconfirm'
            //     })
            // },
            /**
             * 图片点击预览
             * @param item
             * @param index
             */
            onPreview(item, index) {
                console.log(item, "图片index")
                uni.previewImage({
                    urls: item,
                    indicator: 'number',
                    current: index,
                    longPressActions: {
                        itemList: ['发送给朋友', '保存图片', '收藏'],
                        success: function(data) {
                            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                        },
                        fail: function(err) {
                            console.log(err.errMsg);
                        }
                    }
                });
            },
            /**
             * 关闭视频点击
             */
            onCloseVideo() {
                this.videoContext.pause();
                this.isVideoShow = false;
            }
        }
    }
</script>

<style scoped lang="scss">
    .page {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #f6f6f6;
    }

    /*评价筛选*/
    .evaluate-filtrate {
        // padding: 0 30rpx;
        // height: 200rpx;
        width: 100%;
        position: fixed;
        left: 0;
        z-index: 100;
        background-color: #ffffff;
        border-radius: 0 0 10rpx 10rpx;

        .filtrate-list {
            display: flex;
            padding: 30rpx;
            border-bottom: 1px solid #efefef;

            .box {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                align-items: center;

                // height: 100rpx;
                .list {
                    display: flex;
                    margin-right: 20rpx;
                    padding: 10rpx 0;

                    // margin-bottom: 20rpx;
                    text {
                        //display: inline-table;
                        padding: 6rpx 15rpx;
                        font-size: 24rpx;
                        color: $base;
                        background-color: #fff;
                        border: 1px solid $base;
                        border-radius: 8rpx;
                    }

                    .action {
                        border: 1px solid $base;
                        color: #fff;
                        background-color: $base;
                    }
                }
            }
        }

        .evaluate-rate {
            padding: 30rpx;
            display: flex;
            align-items: center;

            .number {
                color: #ff0f00;
                font-size: 36rpx;
                margin-right: 20rpx;
            }
        }
    }

    /* 评价 */
    .evaluate-data {
        margin: 250rpx auto 0;
        padding: 20rpx 30rpx;
        background-color: #ffffff;
        border-radius: 10rpx;

        .evaluate-list {
            width: 100%;

            >.list {
                border-bottom: 1px solid #f6f6f6;
            }

            .user-info {
                display: flex;
                align-items: center;
                width: 100%;
                height: 80rpx;

                .thumb {
                    width: 60rpx;
                    height: 60rpx;

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 100%;
                    }
                }

                .nickname-grade {
                    width: 100%;
                    height: 60rpx;
                    margin-left: 20rpx;

                    .nickname {
                        display: flex;
                        align-items: center;

                        text {
                            font-size: 24rpx;
                            color: #212121;
                        }
                    }

                    .grade {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 100%;
                        margin-top: 6rpx;

                        .star {
                            display: flex;
                            align-items: center;

                            text {
                                font-size: 24rpx;
                                color: #ff0036;
                            }
                        }

                        .date {
                            display: flex;
                            align-items: center;

                            text {
                                font-size: 24rpx;
                                color: #999999;
                            }
                        }
                    }
                }
            }

            .content {
                width: 100%;

                .character {
                    display: flex;
                    align-items: center;
                    padding: 10rpx 0;

                    text {
                        font-size: 24rpx;
                        color: #333333;
                    }
                }

                .attr {
                    display: flex;
                    align-items: center;
                    padding: 10rpx 0;

                    text {
                        font-size: 24rpx;
                        color: #cccccc;
                    }
                }

                .thumb-list {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                    //height: 200rpx;
                    margin: 10rpx 0;

                    .video-info {
                        position: relative;
                        width: 220rpx;
                        height: 220rpx;
                        margin-right: 2%;

                        .picture {
                            width: 100%;
                            height: 100%;
                        }

                        .shade {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            background-color: rgba(0, 0, 0, 0.3);

                            text {
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                font-size: 72rpx;
                                color: #ffffff;
                                transform: translate(-50%, -50%);
                            }
                        }
                    }

                    >.list {
                        width: 220rpx;
                        height: 220rpx;
                        margin-right: 2%;
                        margin-bottom: 15rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    >.list:nth-child(3n) {
                        margin-right: 0;
                    }
                }
            }
        }
    }

    .details-foot {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 120rpx;
        display: flex;
        /* justify-content: space-between; */
        background-color: #ffffff;
        align-items: center;
        border-top: 1rpx solid #efefef;
        /* padding-bottom: 40rpx; */
    }

    .foot-item {
        display: flex;
        text-align: center;
        width: 40%;
        /* margin-left: 50rpx; */
    }

    .foot-item1 {
        display: flex;
        width: 60%;
        text-align: center;
        /*  margin-right: 50rpx; */
    }

    .foot-item0 {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 50%;
        /* margin: 0 20rpx; */
        font-size: 24rpx;
        color: #7f8699;
    }

    .details-foot .iconfont {
        width: 40rpx;
        height: 40rpx;
        text-align: center;
        color: black;
        margin-bottom: 5rpx;
    }

    .details-foot .iconfont0 {
        width: 50rpx;
        height: 50rpx;
        text-align: center;
        color: black;
    }

    .add-shopcart {
        width: 50%;
        padding: 40rpx 30rpx;
        background-image: linear-gradient(to bottom right, #feb802, #fe7714);
        color: #ffffff;
        height: 120rpx;
    }

    .purchase {
        width: 50%;
        padding: 40rpx 30rpx;
        background-color: #ff3225;
        color: #ffffff;
        height: 120rpx;
    }

    .pop {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
    }

    .pop-mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .pop-box {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #ffffff;
    }

    .pop-img {
        width: 260rpx;
        height: 260rpx;
    }

    .pop-num {
        padding: 30rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30rpx;
    }

    .pop-sub {
        color: #ffffff;
        text-align: center;
        padding: 18rpx 40rpx;
        border-radius: 60rpx;
        width: 330rpx;
    }

    .video-win {
        .cu-dialog {
            background-color: transparent;
        }

        .bg-img {
            background-color: transparent;

            video {
                width: 100%;
            }
        }
    }

    // /deep/.zp-paging-container-content {
    //   z-index: 9999999 !important;
    // }
</style>